// 导入path模块
const path=require('path');
// 导入html-webpack-plugin

const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugin=new HtmlWebpackPlugin({
    template:path.join(__dirname,'/src/index.html'),
    filename:'index.html'
});

module.exports={
    mode:'development',
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'main.js'
    },
    devServer:{
        port:3000,
        open:true,
        progress:true,
        compress:true,
        // HMR: Hot Module Replace
        hot:true,
        contentBase:'./src'
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                use:{
                    loader:'babel-loader'
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]  
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader?modules',
                    'less-loader'
                ]
            },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:2000
                    }
                }
            },
            {
                test:/\.(svg|eot|ttf|woff|woff2)$/,
                use:{
                    loader:'url-loader'
                }
            }
        ]
    },
    resolve: {
        // 配置缺省文件后缀
        extensions: ['.js', '.jsx', '.json'],
        // src根目录的别名
        alias: { '@': path.join(__dirname, './src') }
    },
    plugins:[
        htmlPlugin
    ]
}